'use client';

import { Disclosure } from '@headlessui/react';
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
import { usePathname, useRouter } from 'next/navigation';
import { useCallback, useEffect, useState } from 'react';
import { UseTranslation } from '../i18n/client';
// import logoDark from '/public/images/logo-dark.png';
// import logoLight from '/public/images/logo-light.png';

type navigationType = { name: string; href: string }[];

function classNames(...classes: string[]) {
  return classes.filter(Boolean).join(' ');
}

export default function Navbar({ lang }: { lang: Lang }) {
  const { t } = UseTranslation(lang);
  const router = useRouter();
  const pathName = usePathname();
  const [current, setCurrent] = useState<string>(pathName);
  const allNavigation = [
    'product-service',
    'customer-case',
    'resource-center',
    'about-XXX',
    'join-us',
  ];
  const linkTo = (path: string) => {
    router.push(path);
  };

  const getTheme = (): Theme => {
    let localTheme = localStorage.getItem('theme');
    if (
      localTheme === 'dark' ||
      (!localTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)
    ) {
      return 'dark';
    } else {
      return 'light';
    }
  };
  const [theme, setTheme] = useState<Theme>('light');
  // const [logo, setLogo] = useState(logoLight);
  useEffect(() => {
    // setLogo(theme === 'dark' ? logoLight : logoDark);
  }, [theme]);
  const initTheme = useCallback(() => {
    if (getTheme() === 'dark') {
      setTheme('dark');
      document.documentElement.classList.add('dark');
    } else {
      setTheme('light');
      document.documentElement.classList.remove('dark');
    }
  }, []);

  const changeTheme = () => {
    localStorage.setItem('theme', getTheme() === 'light' ? 'dark' : 'light');
    initTheme();
  };
  useEffect(() => {
    setCurrent(pathName);
    initTheme();
  }, [initTheme, pathName]);

  const navigation: navigationType = [
    { name: t('menu.home'), href: `/${lang}` },
    ...allNavigation.map((item) => ({
      //@ts-ignore
      name: t(`menu.${item}`),
      href: `/${lang}/${item}`,
    })),
  ];
  return (
    <>
      <Disclosure as="nav" className="bg-gray-800 dark:bg-white">
        {({ open }) => (
          <>
            <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
              <div className="relative flex h-16 items-center justify-between">
                <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
                  {/* Mobile menu button*/}
                  <Disclosure.Button className="inline-flex items-center justify-center rounded-md p-2 text-gray-400  hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
                    <span className="sr-only">Open main menu</span>
                    {open ? (
                      <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
                    ) : (
                      <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
                    )}
                  </Disclosure.Button>
                </div>
                <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
                  <div className="flex flex-shrink-0 items-center">
                    {/* <Image
                      className="block h-8 w-auto lg:hidden r cursor-pointer"
                      src={logo}
                      alt="XXX"
                      onClick={() => linkTo(`/${lang}`)}
                    />
                    <Image
                      className="hidden h-8 w-auto lg:block cursor-pointer"
                      src={logo}
                      alt="XXX"
                      onDoubleClick={() => (document.body.scrollTop = 0)}
                    /> */}
                  </div>
                  <div className="hidden sm:ml-6 sm:block">
                    <div className="flex space-x-4">
                      {navigation.map((item) => (
                        <a
                          key={item.name}
                          onClick={() => linkTo(item.href)}
                          className={classNames(
                            item.href === current
                              ? 'bg-gray-900 text-white'
                              : 'text-gray-300 dark:text-blue-400 hover:bg-gray-700 hover:text-white',
                            'rounded-md px-3 py-2 text-sm font-medium',
                            'cursor-pointer'
                          )}
                          aria-current={
                            item.href === current ? 'page' : undefined
                          }
                        >
                          {item.name}
                        </a>
                      ))}
                      <button
                        className="bg-white dark:bg-black dark:text-white"
                        onClick={changeTheme}
                      >
                        切换主题
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <Disclosure.Panel className="sm:hidden">
              <div className="space-y-1 px-2 pb-3 pt-2">
                {navigation.map((item) => (
                  <Disclosure.Button
                    key={item.name}
                    as="a"
                    href={item.href}
                    className={classNames(
                      item.href === current
                        ? 'bg-gray-900 text-white'
                        : 'text-gray-300 hover:bg-gray-700 hover:text-white',
                      'block rounded-md px-3 py-2 text-base font-medium'
                    )}
                  >
                    {item.name}
                  </Disclosure.Button>
                ))}
              </div>
            </Disclosure.Panel>
          </>
        )}
      </Disclosure>
    </>
  );
}
